import React from 'react';

const EventLegend = ({ colorMap, events }) => {
  console.log(colorMap);

  return (
    <div style={{ marginBottom: 10 }}>
      <b>颜色和活动对应关系：</b>
      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
        {events.map(event => (
          <div key={event.id} style={{ flexBasis: '50%', display: 'flex', alignItems: 'center', marginBottom: 10 }}>
            <div style={{ width: 10, height: 10, backgroundColor: colorMap[event.id], marginRight: 5 }} />
            <div>{event.activityLabel}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default EventLegend;
